<template>
    <div class="table-content-item" v-for="item in data" :key="item.title">
        <div class="table-content-item-label">
            <img :src="item.titleImg" alt="" />
            {{ item.title }}
        </div>
        <div class="table-content-item-value">
            <CountTo :value="item.val" :duration="2000" style="display: inline-block;"></CountTo>
            <span class="desc">/个</span>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted, watch } from "vue";
import icon1 from "@/assets/icon/icon1.png";
import icon2 from "@/assets/icon/icon2.png";
import icon3 from "@/assets/icon/icon3.png";
import CountTo from '@/components/CountTo/index.vue';

import { getSavetylevel } from '@/api/homeData'

const fetchData = ref([])
const data = ref([
    {
        titleImg: icon1,
        title: "A级",
        val: 0
    },
    {
        titleImg: icon2,
        title: "B级",
        val: 0
    },
    {
        titleImg: icon3,
        title: "C级",
        val: 0
    }
]);

onMounted(async () => {
    const result = await getSavetylevel();
    fetchData.value = result.data;
});

watch(() => fetchData.value, (newVal) => {
    if (newVal && newVal.length > 0) {
        // 创建新数组来触发响应式更新
        data.value = [
            {
                titleImg: icon1,
                title: "A级",
                val: newVal[0].value
            },
            {
                titleImg: icon2,
                title: "B级",
                val: newVal[1].value
            },
            {
                titleImg: icon3,
                title: "C级",
                val: newVal[2].value
            }
        ];
    }
}, { immediate: true });
</script>
<style scoped>
.table-content-item {
    flex-basis: 33%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    color: #e6f7ff;
    font-family: homeTime;
    font-size: 1.3vw;
}

.table-content-item .table-content-item-label {
    margin-bottom: 2vw;
}

.table-content-item .table-content-item-value {
    font-size: 1vw;
}

.table-content-item .table-content-item-value span.desc {
    color: #54e5fc;
}
</style>